import { View } from '@hips/taro-ui'
import Styles from './tab-change.module.less'
import AppFunc from './app-func'
import TabChange from './tab-change'
export default {
  name: 'TabChange',
  props: {
    menus: {
      type: Array,
      default: () => []
    },
    type: {
      type: String,
      default: 'tab'
    }
  },
  computed: {
    currentMenu() {
      if (this.menus.length) {
        return this.menus[this.currentIndex]
      }
      return {}
    }
  },
  watch: {
    menus: {
      handler(newMenus) {
        this.currentIndex = 0
      },
      deep: true
    }
  },
  data() {
    return { currentIndex: 0 }
  },
  methods: {
    changeTab(index) {
      if (this.currentIndex === index) return
      this.currentIndex = index
    }
  },
  render() {
    const buildFuncs = () => {
      if (this.currentMenu?.funcs?.length) {
        return <AppFunc funcs={this.currentMenu.funcs}></AppFunc>
      }
      return ''
    }
    const buildMenus = () => {
      if (this.currentMenu?.menus?.length) {
        return (
          <TabChange type="card" menus={this.currentMenu.menus}></TabChange>
        )
      }
      return ''
    }

    return (
      <View class={Styles['tab-change']}>
        <View class={Styles['tab-change-tab']}>
          <View class={Styles['tab-change-tab-shadow']}></View>
          <View class={Styles['tab-change-tab-box']}>
            {this.menus.map((i, index) => {
              const currentIndex = this.currentIndex === index
              return (
                <View
                  onTap={() => this.changeTab(index)}
                  class={[
                    Styles[`tab-change-tab-box-item${this.type}`],
                    currentIndex &&
                      Styles[`tab-change-tab-box-selected${this.type}`]
                  ]}
                >
                  <View
                    class={[Styles[`tab-change-tab-box-item${this.type}-text`]]}
                  >
                    {i.name}
                  </View>
                </View>
              )
            })}
          </View>
        </View>
        {buildFuncs()}
        {buildMenus()}
      </View>
    )
  }
}
